<template>
  <div class="title">地震空间统计</div>
  <div class="chartbox" ref="chartRef"> </div>
</template>  
  
<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import * as echarts from 'echarts'

const option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {
    top: '5%',
    left: 'right',
    icon: 'circle',
    textStyle: {
      color: '#fff'
    }
  },
  grid: {
    top: 40,
    right: 20,
    left: 50,
    bottom: 60
  },

  xAxis: {
    type: 'category',
    axisLine: {
      lineStyle: {
        color: '#B9EEFF'
      }
    },
    axisTick: { show: false },
    axisLabel: {
      margin: 10,
      color: '#B9EEFF',
      textStyle: {
        fontSize: 14,
        color: '#B9EEFF'
      }
    }
  },
  yAxis: {
    name: '个',
    axisLabel: {
      formatter: '{value}',
      color: '#B9EEFF'
    },
    axisLine: {
      show: false,
      lineStyle: {
        color: '#fff'
      }
    },
    splitLine: {
      lineStyle: {
        color: 'rgba(255,255,255,0.12)'
      }
    }
  },
  dataZoom: [
    {
      show: true,
      height: 12,
      xAxisIndex: [0],
      bottom: '8%',
      start: 0,
      end: 50,
      handleSize: '110%',
      handleStyle: {
        color: '#d3dee5'
      },
      textStyle: {
        color: '#fff'
      },
      borderColor: '#90979c'
    },
    {
      type: 'inside',
      show: true,
      height: 15,
      start: 1,
      end: 35
    }
  ],
  series: [
    {
      name: '3.0-3.9',
      type: 'bar',
      stack: '总数',

      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color: '#44F1B6  ' // 0% 处的颜色
              },
              {
                offset: 1,
                color: '#30DBE9' // 100% 处的颜色
              }
            ],
            false
          ),
          barBorderRadius: [0, 0, 0, 0]
        }
      }
    },

    {
      name: '4.0-4.9',
      type: 'bar',
      stack: '总数',
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color: '#3178EF ' // 0% 处的颜色
              },
              {
                offset: 1,
                color: '#30D3EF' // 100% 处的颜色
              }
            ],
            false
          ),
          barBorderRadius: [0, 0, 0, 0]
        }
      }
    },
    {
      name: '5.0+ ',
      type: 'bar',
      stack: '总数',
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color: '#D67023  ' // 0% 处的颜色
              },
              {
                offset: 1,
                color: '#D0B826' // 100% 处的颜色
              }
            ],
            false
          ),
          barBorderRadius: [0, 0, 0, 0]
        }
      }
    }
  ]
}
const getData = (e) => {
  option.xAxis.data = e.provinceData
  option.series[0].data = e.chartData[0].data
  option.series[1].data = e.chartData[1].data
  option.series[2].data = e.chartData[2].data
  initChart()
}
// 主动暴露childMethod方法
defineExpose({ getData })

const chartRef = ref(null)
let myChart = null
// 初始化图表
const initChart = () => {
  if (chartRef.value) {
    myChart = echarts.init(chartRef.value)
    myChart.setOption(option)
    window.addEventListener('resize', () => {
      myChart.resize()
    })
    // 指定图表的配置项和数据
  }
}

// 组件卸载时销毁图表实例，避免内存泄漏
onUnmounted(() => {
  if (chartRef.value) {
    echarts.dispose(chartRef.value.getEchartsInstance())
  }
})
</script>  
  
<style scoped>
.title {
  height: 41px;
  color: #fff;
  line-height: 41px;
  font-size: 18px;
  padding-left: 26px;
  font-weight: bold;
}
.chartbox {
  height: calc(100% - 41px);
}
</style>